<template>
	<el-dialog title="添加角色" :visible.sync="showDialog" :before-close="cancel" custom-class="create-role-dialog">
		<el-form :model="roleData" label-width="100px" ref="formRef">
			<el-form-item label="角色名" :rules="roleData.roleNameRules" prop="roleName" :error="roleError">
				<el-input v-model="roleData.roleName" placeholder="请输入角色名" maxlength="16" @input="onInput"></el-input>
			</el-form-item>
			<el-form-item label="勾选权限" :rules="roleData.userPermissionRules" prop="permission">
				<Permisions v-if="showDialog" @select="onSelect" />
			</el-form-item>

			<div class="btns">
				<el-button @click="cancel">取消</el-button>
				<el-button type="primary" @click="create">确认</el-button>
			</div>
		</el-form>
	</el-dialog>
</template>

<script>
import { mapState } from 'vuex';
import { createRole } from '../../../api/api';
import { validateRoleName } from '@/utils/formValidate';
import Permisions from './Permisions.vue';

export default {
	components: { Permisions },
	props: {
		show: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			roleData: {
				roleName: '',
				permission: [],

				roleNameRules: [
					{ required: true, message: '请输入角色名', trigger: ['blur', 'change'] },
					{ validator: validateRoleName, trigger: 'blur' }
				],
				userPermissionRules: [{ required: true, message: '请勾选权限', trigger: ['blur', 'change'] }]
			},
			showDialog: false,
			roleError: '' // 角色名校验失败
		};
	},
	watch: {
		show(newVal) {
			this.showDialog = newVal;
		}
	},
	computed: {
		...mapState({
			loginInfo: state => state.login.userInfo
		})
	},
	mounted() {},
	methods: {
		onInput() {
			this.roleError = '';
		},
		create() {
			this.roleError = '';
			// 角色名去重校验包含“超级管理员”“机器人坐席”两个角色名
			if (['超级管理员', '机器人坐席', 'admin', '机构管理员', '管理员'].includes(this.roleData.roleName)) {
				this.$nextTick(() => {
					this.roleError = '角色名已存在';
				});
				return;
			}
			this.$refs['formRef'].validate(valid => {
				if (valid) {
					this.createRole();
				}
			});
		},
		cancel() {
			this.$refs['formRef'].resetFields();
			this.$emit('close');
		},
		createRole() {
			createRole(this.roleData.roleName, this.roleData.permission)
				.then(res => {
					const { code } = res.data;
					if (code === 200) {
						this.$message.success('角色添加成功');
						this.showAddAgent = false;
						this.$emit('create');
						this.$refs.formRef.resetFields();
						this.roleData.permission = [];
						this.roleData.roleName = '';
					} else {
						console.warn('create role  : ', res.data);
					}
				})
				.catch(err => {
					console.error('create role error : ', err);
					this.$Spin.hide();
					this.$requestApiError(err, () => {
						this.$router.push('/');
					});
					const { code } = err;
					if (code === '1000') {
						this.roleError = '角色名已存在';
					}
				});
		},
		onSelect(options) {
			this.roleData.permission = options;
		}
	}
};
</script>

<style lang="less" scoped>
.create-role-dialog {
	.btns {
		text-align: right;
	}
	.head {
		padding: 20px 0;
	}
	.el-avatar > img {
		width: 100%;
	}
	// .sub-checkbox {
	// 	padding-left: 28px;
	// }
}
</style>
